<template>
  <up-popup :show="show" mode="center"
    :customStyle="{ width: '100%', height: '100%', zIndex: 9999, background: 'transparent' }">
    <view class="image-preview-container" @click="close">
      <!-- 顶部工具栏 -->


      <swiper class="preview-swiper" :current="currentIndex" @change="onSwiperChange" :circular="true"
        :indicator-dots="false" :duration="300">
        <swiper-item v-for="(image, index) in imageList" :key="index">
          <view class="swiper-item">
            <image :src="image" mode="aspectFit" class="preview-image" :lazy-load="false" @load="onImageLoad(index)"
              @error="onImageError(index)" @tap="onImageTap" />

            <view class="image-loading" v-if="!imageLoaded[index]">
              <up-loading-icon size="36" color="#fff"></up-loading-icon>
              <text class="loading-text">加载中...</text>
            </view>
          </view>
        </swiper-item>
      </swiper>



      <view class="preview-header">
        <view class="header-left">
          <text class="current-index">{{ currentIndex + 1 }}/{{ imageList.length }}</text>
        </view>
        <view class="header-right">
          <up-icon name="close" size="24" color="#fff" @click="close"></up-icon>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script>
export default {
  name: 'ImagePreview',
  props: {
    // 是否显示预览
    show: {
      type: Boolean,
      default: false
    },
    // 图片列表
    imageList: {
      type: Array,
      default: () => []
    },
    // 当前显示的图片索引
    currentIndex: {
      type: Number,
      default: 0
    },
    // 是否显示描述
    showDescription: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      imageLoaded: [], // 图片加载状态
      localCurrentIndex: 0
    }
  },
  watch: {
    show (newVal) {
      if (newVal) {
        // 显示时初始化加载状态
        this.initImageLoaded()
        this.localCurrentIndex = this.currentIndex
      }
    },
    currentIndex (newVal) {
      this.localCurrentIndex = newVal
    }
  },
  methods: {
    // 初始化图片加载状态
    initImageLoaded () {
      this.imageLoaded = new Array(this.imageList.length).fill(false)
    },

    // 滑动切换
    onSwiperChange (e) {
      this.localCurrentIndex = e.detail.current
      this.$emit('indexChange', this.localCurrentIndex)
    },

    // 图片加载成功
    onImageLoad (index) {
      this.$set(this.imageLoaded, index, true)
    },

    // 图片加载失败
    onImageError (index) {
      this.$set(this.imageLoaded, index, true)
      console.error(`图片加载失败: ${this.imageList[index]}`)
    },

    // 图片点击
    onImageTap () {
      // 可以在这里添加点击图片的额外操作，比如显示/隐藏工具栏
    },

    // 关闭预览
    close () {
      this.$emit('update:show', false)
      this.$emit('close')
    },
  }
}
</script>

<style lang="scss" scoped>
.image-preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  // 顶部工具栏
  .preview-header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);

    .current-index {
      color: #fff;
      font-size: 32rpx;
      font-weight: 500;
    }

    .header-right {
      .u-icon {
        padding: 16rpx;
      }
    }
  }

  // 滑动容器
  .preview-swiper {
    margin-bottom: 10px;
    width: 100%;
    height: 100%;

    .swiper-item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .preview-image {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
      }

      .image-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20rpx;

        .loading-text {
          color: #fff;
          font-size: 28rpx;
        }
      }
    }
  }

  // 底部描述
  .preview-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32rpx;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

    .image-desc {
      color: #fff;
      font-size: 28rpx;
      text-align: center;
      line-height: 1.5;
    }
  }
}
</style>